<%--
  Created by IntelliJ IDEA.
  User: huawei
  Date: 2020/6/20
  Time: 9:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户详情</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">跟踪记录</li>
        <li>详细资料</li>
        <li>联系人</li>
        <li>转移记录</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">1</div>
        <div class="layui-tab-item">
            <form class="layui-form">
                <div>
                    <button class="layui-btn" lay-filter="update" lay-submit>修改</button>
                    <button class="layui-btn" lay-filter="cut" lay-submit>打印</button>
                </div>
            </form>
            <table class="layui-table" lay-skin="col">
                <colgroup>
                    <col width="20%">
                    <col width="30%">
                    <col width="20%">
                    <col width="30%">
                </colgroup>
                <thead>
                <tr>
                    <th>公司信息</th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                </thead>
                <tbody class="my-table-class">
                <tr>
                    <td>客户名称：</td>
                    <td id="customer-name">${customer.name}</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>客户创建者：</td>
                    <td id="creater">${customer.creater}</td>
                    <td>客户创建时间：</td>
                    <td id="createTime">${customer.create_time}</td>
                </tr>
                <tr>
                    <td>公司电话：</td>
                    <td id="companyPhone">${customer.company_phone}</td>
                    <td>意向产品：</td>
                    <td id="productId">产品1</td>
                </tr>
                <tr>
                    <td>客户状态：</td>
                    <td id="status">${customer.status}</td>
                    <td>客户类别：</td>
                    <td id="type">${customer.type}</td>
                </tr>
                <tr>
                    <td>客户来源：</td>
                    <td id="source">${customer.source}</td>
                    <td>客户等级：</td>
                    <td id="level">${customer.grade}</td>
                </tr>
                <tr>
                    <td>客户信用度：</td>
                    <td id="credit">${customer.credit}</td>
                    <td>客户成熟度：</td>
                    <td id="maturity">${customer.maturity}</td>
                </tr>
                <tr>
                    <td>客户所在地区：</td>
                    <td id="area">${customer.area}</td>
                    <td>邮政编码：</td>
                    <td id="postCode">${customer.post_code}</td>
                </tr>
                <tr>
                    <td colspan="1">客户详细地址：</td>
                    <td colspan="3" id="companyAddress">${customer.company_address}</td>
                </tr>
                <tr>
                    <td colspan="1">客户相关资料：</td>
                    <td colspan="3" id="document"></td>
                </tr>
                <tr>
                    <td colspan="1">客户介绍：</td>
                    <td colspan="3" id="description">${customer.description}</td>
                </tr>
                <tr>
                    <td>传真地址：</td>
                    <td id="faxAddress">${customer.fax_address}</td>
                    <td>公司网站：</td>
                    <td id="companyWebsite">${customer.company_website}</td>
                </tr>
                <tr>
                    <td>公司法人：</td>
                    <td id="corporation">${customer.corporation}</td>
                    <td>开户银行：</td>
                    <td id="depositBank">${customer.deposit_bank}</td>
                </tr>
                <tr>
                    <td colspan="1">银行账户：</td>
                    <td colspan="3" id="bankAccount">${customer.bank_account}</td>
                </tr>
                <tr>
                    <td colspan="1">年营业额：</td>
                    <td colspan="3" id="annualSale">${customer.annual_sale}</td>
                </tr>
                <tr>
                    <td colspan="1">营业执照注册号：</td>
                    <td colspan="3" id="licenseNumber">${customer.license_number}</td>
                </tr>
                <tr>
                    <td colspan="1">地税登记号：</td>
                    <td colspan="3" id="landTaxNumber">${customer.land_tax_number}</td>
                </tr>
                <tr>
                    <td colspan="1">国税登记号：</td>
                    <td colspan="3" id="nationalTaxNumber">${customer.national_tax_number}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="linkman" lay-filter="linkman"></table>
        </div>
        <div class="layui-tab-item">4</div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
<script type="text/html" id="listmanToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add" style="width: 100px;height: 30px">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete" style="width: 120px;height: 30px">删除</button>
    </div>
</script>
<script type="text/html" id="innerToolBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update">修改</a>
</script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element','table','jquery','form'] ,function(){
        var element = layui.element;
        var table = layui.table;
        var $=layui.$;//引入jquery
        var form=layui.form

        table.render({
            elem: '#linkman'
            ,url:'${pageContext.request.contextPath}/linkman/track'
            ,toolbar: '#listmanToolbar'
            ,title: '联系人'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'name', title:'名字', width:120,}
                ,{field:'position', title:'职位', width:150, }
                ,{field:'office_phone', title:'固定电话', width:150, }
                ,{field:'mobile_phone', title:'移动电话', width:150, }
                ,{field:'birthday', title:'生日', width:150, }
                ,{field:'sex', title:'性别', width:150, }
                ,{field:'grade', title:'联系人级别', width:150, }
                ,{field: 'remark', title:'备注', width:150}
                ,{fixed: 'right', title:'操作', toolbar: '#innerToolBar', width:150}
            ]]
            ,page: true
            ,where:{
                id:${id}
            }

        });

        table.on('toolbar(linkman)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);//获取到选中的内容
            switch(obj.event){//工具栏中按钮的lay-event属性的值
                case 'add':
                    layer.open({
                        title:"添加联系人",
                        type:2,
                        content:"/linkman/add.jsp?customerid="+${id},
                        area: ['800px', '700px'],
                        maxmin:true//可以最大化
                    });
                    break;
                case 'update':
                    layer.open({
                        title:"修改联系人",
                        type:2,
                        content:"${pageContext.request.contextPath}/linkman/update?id="+data.id,
                        area: ['800px', '700px'],
                        maxmin:true//可以最大化
                    });
                    break;
                case 'delete':
                    layer.msg('删除');
                    console.log(checkStatus.data)//选中的数据
                    if (checkStatus.data.length==0){
                        layer.alert("请至少选择一项删除")
                        return;
                    }
                    var data=checkStatus.data;
                    var idArray=[];
                    //获取id值,并放入数组
                    for (var i=0;i<data.length;i++){
                        idArray.push(data[i].id)
                    }
                    $.post("${pageContext.request.contextPath}/linkman/delete?id="+data.id,
                        {ids:idArray.join(",")},function (result) {
                            if (result.code==0){
                                layer.msg("删除成功");
                                //重新加载表格
                                table.reload("linkman",{
                                    page:{
                                        curr:1
                                    }
                                })
                                return
                            }
                            layer.msg("删除失败");
                        },"json")
                    break;
            };
        });

        //行内操作栏监听事件
        table.on('tool(linkman)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            switch (layEvent) {
                case 'update':
                    layer.open({
                        title:"修改联系人",//标题
                        type:2,//2 为iframe层，可以加载其他的页面到弹出层
                        content:"${pageContext.request.contextPath}/linkman/toupdate?id="+data.id,
                        area: ['800px', '700px'],//定义宽高
                        maxmin:true//可以最大化
                    });
                    break;
            }
        });

        form.on("submit(update)",function (data) {
            layer.open({
                title:"修改联系人",//标题
                type:2,//2 为iframe层，可以加载其他的页面到弹出层
                content:"${pageContext.request.contextPath}/customer/toupdate?customerid="+${id},
                area: ['800px', '700px'],//定义宽高
                maxmin:true//可以最大化
            });
        })

    })
</script>
</body>
</html>
